import React, { Component } from 'react'
import { Button } from 'antd'
import store from '../store/index'
const styleClass = {color:"red",fontSize:'30px',fontWeight:'400',textAlign:'center'}
export default class Detail extends Component {
  //     可以不写constructor，一旦写了constructor，就必须在此函数中写super(),
  // 此时组件才有自己的this，在组件的全局中都可以使用this关键字，
  // 否则如果只是constructor 而不执行 super() 那么以后的this都是错的！！！
  //   https://www.cnblogs.com/faith3/p/9219446.html --讲解链接
  constructor(props) {
    super(props)
    this.state = store.getState()
  }


  //   生命周期
  //   在渲染前调用,在客户端也在服务端
  componentWillMount() {
    console.log('11111111111111进来就执行')
  }
  //   在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，
  // 可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，
  // 可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
  componentDidMount() {
    console.log('222222222222进来就执行')
    store.subscribe(this.storeChange)
  }
  storeChange = () => {
    this.setState({
      ...store.getState()
    })
    console.log('redux发生改变')

  }
  //   在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
  componentWillReceiveProps(newProps) {
    console.log('333333333333333333')
  }
  //   返回一个布尔值。在组件接收到新的props或者state时被调用。
  // 在初始化时或者使用forceUpdate时不被调用。
  shouldComponentUpdate(newProps, newState) {
    return true
  }

  //   可以在你确认不需要更新组件时使用。
  // 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
  componentWillUpdate(nextProps, nextState) {
    console.log('444444444444444-试图发生改变触发')
  }
  //   在组件完成更新后立即调用。在初始化时不会被调用。
  componentDidUpdate(prevProps, prevState) {
    console.log('555555555555555555-试图发生改变触发')
  }
  //   在组件从 DOM 中移除之前立刻被调用。
  componentWillUnmount() {
    console.log('666666666666666666666666代码发生改变触发')
  }
  render() {
    return (
      <div>
        <h1>class类组件</h1>
        <Button type="primary" onClick={this.goback.bind(this)}>
          返回上一级
        </Button>
        <div>
          <h2>redux</h2>
        </div>
        <Button onClick={this.testRedux.bind(this)}>测试Redux</Button>
        <h2>redux获取到参数1：{this.state.count}</h2>
        <Button danger onClick={this.addCount}>
          加一
        </Button>
        <span style={{ color: 'red', fontSize: '30px', margin: '0 20px' }}>
          {this.state.count}
        </span>
        <Button danger onClick={this.subCount}>
          减一
        </Button>
        <h2>行内样式的另一种写法</h2>
        <span style={styleClass}>redux获取到参数2：{this.state.yangjun.name}</span>
        <Button danger onClick={this.gaoYixia}>搞一下</Button>

      </div>
    )
  }
  //   方法事件
  goback() {
    // this.props.history.goBack()
    this.props.history.go(-1)
  }
  testRedux() {}
  //   计算器
  // 通过dispatch触发修改state的操作，进行数据修改，参数是action
  addCount = () => {
      console.log('添加')
    store.dispatch({
      type: 'addCount',
      value: 2,
    })
  }
  subCount = () => {
    console.log('减少')
    store.dispatch({
      type: 'subCount',
      value: 2,
    })
  }
  gaoYixia = () =>{
      console.log('yangjun666')
    store.dispatch({
        type: 'gaoYixia',
        data:{name:'杨少666'}
      })
  }
  
}
